html{
  height: 12rem;
  background: #fff;
}
body{
  height: 12rem;
  background: #fff;
}
section{
  position: relative;
  height: 1.54rem ;
  margin-bottom: 0.2rem;
  font-family: "PingFang SC";
  >span{
    position: absolute;
  }
  .money-symbol-warp{
    font-size: 0;
    left: 0.54rem;
    display: inline-block;
    width: 1.94rem;
    height: 1.54rem;
    line-height: 1.54rem;
    text-align: center;
    top: 0;
    left: 0;
    >span{
      vertical-align: middle;
      line-height: 100%;
    }
    .money-symbol{
    font-size: 0.32rem;
    }
    .money-number{
    font-size: 0.46rem;
    }
  }
  .coupon-name{
    top: 0.24rem;
    left: 2.28rem;
    font-size: 0.26rem;
    line-height: 100%;
  }
  .coupon-explain{
    top: 0.72rem;
    left: 2.28rem;
    font-size: 0.21rem;
    line-height: 0.35rem;
  }
  &.canUse{
    background:url("../../assets/coupon/canUse.png") no-repeat center;
    background-size: cover;
    .money-symbol-warp{
      font-size: 0;
      .money-symbol{
       color: #000;
      }
      .money-number{
        color: #000;
      }
    }
    .coupon-name{
      color: #363636;
    }
    .coupon-explain{
     color: #a3a3a3;
    }
  }
  &.used{
    background:url("../../assets/coupon/used.png") no-repeat center;
    background-size: cover;
    .money-symbol-warp{
      font-size: 0;
      .money-symbol{
        color: #717171;
      }
      .money-number{
        color: #717171;
      }
    }
    .coupon-name{
      color: #848484;
    }
    .coupon-explain{
      color: #a3a3a3;
    }
  }
  &.outData{
    background:url("../../assets/coupon/outDate.png") no-repeat center;
    background-size: cover;
    .money-symbol-warp{
      font-size: 0;
      .money-symbol{
        color: #c8c8c8;
      }
      .money-number{
        color: #c8c8c8;
      }
    }
    .coupon-name{
      color: #a3a3a3;
    }
    .coupon-explain{
      color: #a3a3a3;
    }
  }

}


